﻿<%@ Control Language="C#" AutoEventWireup="true" CodeFile="ProductImages.ascx.cs"
    Inherits="Controls_ProductImages" %>
<script src="<%= KTFrameworkCus.Globals.ApplicationPath %>dms/jsWatermark/jquery.data.js"
    type="text/javascript"></script>
<script src="<%= KTFrameworkCus.Globals.ApplicationPath %>dms/jsWatermark/jquery.watermark.min.js"
    type="text/javascript"></script>
<script src="<%= KTFrameworkCus.Globals.ApplicationPath %>dms/jsWatermark/jquery.watermark.js"
    type="text/javascript"></script>
<%
    string productid = HttpContext.Current.Request.QueryString["ProductID"] == null ? "-1" : HttpContext.Current.Request.QueryString["ProductID"];
%>
<script type="text/javascript">
    function __doPostBack(eventTarget, eventArgument) {
        if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
            theForm.__EVENTTARGET.value = eventTarget;
            theForm.__EVENTARGUMENT.value = eventArgument;
            theForm.submit();
        }
    }

    //    function btnpob_Click() {
    //      <%= GetLoginPostBack() %>;
    //    }

    function btnpob_Click() {
        __doPostBack('btnpob', '');
    }

    $(function () {
        $(".info > .tenhinh").watermark("Tên hình...", "watermark2");
        $(".info > .tenhinhen").watermark("Image name...", "watermark2");
    });

    $(document).ready(function () {
        var windowW = $(document).width();
        var heightH = $(window).height();
        $(".group1").colorbox({ rel: 'group1',
            maxWidth: windowW,
            maxHeight: heightH

        });

        $(".iframe").colorbox({ iframe: true, width: "710px", height: "570px" });

        //$(".ajax").colorbox();
        $('.dms-Image-Link').hover(function () {
            $(this).css('border', 'solid 1px #8FD2FF');
            //                $(this).parent().parent().children('.ImageInsideControl').show();
        }, function () {
            $(this).css('border', 'solid 1px #E6E6E6');
            //                $(this).parent().parent().children('.AlbumInsideControl').hide();
        });
        $(".dms-Image-list li").hover(function () {
            if ($(this).children(".ImageInsideControl").children("input[type='checkbox']").attr("checked")) {
                return;
            }
            $(this).children('.ImageInsideControl').show();
        }, function () {
            if ($(this).children(".ImageInsideControl").children("input[type='checkbox']").attr("checked")) {
                return;
            }
            $(this).children('.ImageInsideControl').hide();
        });

        $('.ImageInsideControl input[type="checkbox"]').click(function () {
            if ($(this).attr("checked")) {
                $(this).parent().show();
            }
        });


        //save info
        $(".btnsaves").click(function () {
            var imageid = $(this).parent().parent().children('#hfImageID').val();
            var title = $(this).parent().parent().children('#txttenhinh').val();
            var title_en = $(this).parent().parent().children('#txttenhinh_en').val();
            var strURL = "<%= KTFrameworkCus.Globals.ApplicationPath %>dms/Ajax/dms-Ajax.asmx/UpdateProductImageInfo";
            $.ajax({
                url: strURL,
                type: 'POST',
                data: "imageid=" + imageid + "&title=" + title + "&title_en=" + title_en,
                datatype: "Text",
                success: function (msg) {
                    var mess = $(msg).find('string').text();
                    if (mess == "Done") {
                        $(".donespan-" + imageid).show().delay(1000).fadeOut(400);
                    }
                }
            });
        });

        $('input[type="checkbox"][checked="unc"]').removeAttr('checked');
        var i = 0;
        $(".hpr").click(function () {
            if (i == 0) {
                $(".info").slideToggle();
                $(this).html("Ẩn thuộc tính");
                i = 1;
                return false;
            }
            if (i == 1) {
                $(".info").slideToggle();
                $(this).html("Hiện thuộc tính");
                i = 0;
                return false;
            }

        });

        $(".btnremove").click(function () {
            var answer = confirm("Bạn muốn xóa tập tin này chứ ?")
            if (answer) {
                var imageid = $(this).parent().parent().children('#hfImageID').val();
                var strURL = "<%= KTFrameworkCus.Globals.ApplicationPath %>dms/Ajax/dms-Ajax.asmx/deleteProductImage";
                $.ajax({
                    url: strURL,
                    type: 'POST',
                    data: "imageid=" + imageid + ",",
                    datatype: "Text",
                    success: function (msg) {
                        var mess = $(msg).find('string').text();
                        if (mess.indexOf(',') > -1) {
                            var list = mess.split(',');
                            for (var i = 0; i < list.length - 1; i++) {
                                $("#dmsImageID-" + list[i]).fadeOut(400, function () {
                                    $(this).remove();
                                });

                                //.fadeOut(400).delay(400).remove();
                                //alert(list[i]);
                            }
                        }
                        else {
                            alert('Có lỗi xảy ra!')
                        }
                    }

                });
            }
            return false;
        })

    });
</script>
<script type="text/javascript">
    $(function () {
        $('#sortable').sortable({
            placeholder: 'ui-state-highlight',
            update: OnSortableUpdate
        });
        //$('#sortable').disableSelection();

        var progressMessage = 'Saving changes... <img src="dms/loader.gif"/>';
        var successMessage = 'Saved successfully!';
        var errorMessage = 'There was some error in processing your request';
        var messageContainer = $('#message').find('p');

        function OnSortableUpdate(event, ui) {
            var order = $('#sortable').sortable('toArray').join(',').replace(/id_/gi, '')
            //console.info(order);

            $(".loading").show();

            $.ajax({
                type: 'POST',
                url: '<%= KTFrameworkCus.Globals.ApplicationPath %>dms/Ajax/ReOrder.asmx/updateProductImage',
                data: '{itemOrder: \'' + order + '\'}',
                contentType: 'application/json; charset=utf-8',
                dataType: 'json',
                success: OnSortableUpdateSuccess,
                error: OnSortableUpdateError
            });
        }

        function OnSortableUpdateSuccess(response) {
            $(".loading").hide();
        }

        function OnSortableUpdateError(xhr, ajaxOptions, thrownError) {

        }

    });
 
</script>
<div class="globalcontrol" style="margin-bottom: 10px; height: 30px;">
    <a href="#HideProperties" class="hpr" style="display: block; height: 30px; padding: 0 20px;
        -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; color: #000000;
        border: solid 1px #BFBFBF; float: left; line-height: 30px;">Hiện thuộc tính</a>
</div>
<div style="clear: both;">
</div>
<div class="dms-Gallery-Image-List">
    <ul class="dms-Image-list" id="sortable">
        <asp:Repeater ID="dtlImages" runat="server">
            <ItemTemplate>
                <li id='dmsImageID-<%# Eval("imageid") %>' class="dms-Image-Poster ui-state-default">
                    <div class="ImageInsideControl">
                        <input type="checkbox" id='ckdelte-<%# Eval("imageid") %>' name='ckdelte-<%# Eval("imageid") %>'
                            value='<%# Eval("imageid") %>' />
                    </div>
                    <div class="dms-Image-wrapper">
                        <a href='<%= KTFrameworkCus.Globals.ApplicationPath %>userupload/products/<%# Eval("imageurl") %>'
                            class='dms-Image-Link group1 ajax'><span style='background: url(<%= KTFrameworkCus.Globals.ApplicationPath %>userupload/products/thumb_<%# Eval("imageurl") %>) 0 0;'>
                            </span></a>
                        <div class="info" style="display: none;">
                            <input type="hidden" id="hfImageID" value='<%# Eval("imageid") %>' />
                            <input type="text" id="txttenhinh" class="tenhinh" value='<%# Eval("title") %>' style="width: 174px;" />
                            <input type="text" id="txttenhinh_en" class="tenhinhen" value='<%# Eval("title_en") %>'
                                style="width: 174px;" />
                            <div style="position: relative;" class="cont">
                                <span class='donespan-<%# Eval("imageid") %>' style="color: #03C400; font-weight: bold;
                                    position: absolute; right: 35px; top: 3px; display: none;">Done!</span>
                                <img class="btnsaves" alt="Save" title="Save" style="position: absolute; right: 16px;
                                    top: 3px;" src="<%= KTFrameworkCus.Globals.ApplicationPath %>images/check_on.gif" />
                                <img class="btnremove" alt="Remove" title="Remove" style="position: absolute; right: 0;
                                    top: 2px;" src="<%= KTFrameworkCus.Globals.ApplicationPath %>images/remove-row.gif" />
                            </div>
                        </div>
                    </div>
                </li>
            </ItemTemplate>
        </asp:Repeater>
    </ul>
</div>
<div class="dms-Gallery-Control">
    <div id="fileupload">
        <div style="margin-bottom: 10px;">
            <select id="ddlACtion" style="height: 23px;">
                <option value="1" selected="selected">Xóa những hình đã chọn</option>
            </select>
            <asp:DropDownList ID="ddlAlbum" runat="server" Style="height: 23px; display: none;">
            </asp:DropDownList>
            <input id="btnAction1" value="Thực hiện" style="border: 0pt none; color: rgb(255, 255, 255);
                border-radius: 3px 3px 3px 3px; background-color: rgb(94, 94, 94); font-size: 12px;
                vertical-align: middle; height: 23px; padding-bottom: 4px; text-align: center;" />
            <input type="checkbox" id="ckAll" />
            Chọn tất cả
            <img alt="" id="loaderimg" style="display: none;" src="<%= KTFrameworkCus.Globals.ApplicationPath %>dms/ajax-loader_3.gif" />
        </div>
        <div style="margin-bottom: 10px;">
            Chỉ chấp nhận Tập tin ảnh: *.JPEG; *.JPG; *.PNG<br />
            <br />
        </div>
        <asp:FileUpload ID="FileUpload1" runat="server" />
    </div>
    <asp:Button ID="btnpob" runat="server" Text="Button" Visible="False" />
</div>
<script type="text/javascript">

    //    function reload() {    
    //        var strURL = "<%= KTFrameworkCus.Globals.ApplicationPath %>dms/Ajax/dms-Ajax.asmx/GetImages";
    //        $.ajax({
    //            type: "POST",
    //            url: strURL,
    //            data: "{productid:'"+<%= productid %>+"'}",
    //            contentType: "application/json; charset=utf-8",
    //            dataType: "json",
    //            success: function (msg) {            
    //            btnpob_Click();
    //                //location.reload();
    //             } 
    //        });
    //    }
    $(document).ready(function () {

        var ImageSelected = "";
        var option = 1;
        $("#ddlACtion").change(function () {
            option = $(this).val();
        });
        $("#ckAll").click(function () {
            if ($("#ckAll").attr("checked")) {
                $('.ImageInsideControl input[type="checkbox"]').attr('checked', 'checked');
                $('.ImageInsideControl').show();
            }
            else {
                $('.ImageInsideControl input[type="checkbox"]').removeAttr('checked');
                $('.ImageInsideControl').hide();
            }

        });

        $("#btnAction1").click(function () {
            $('.ImageInsideControl input[type="checkbox"]').each(function () {
                if ($(this).attr("checked")) {
                    ImageSelected = ImageSelected + $(this).val() + ',';
                }

            });
            if (option == 1) {
                var strURL = "<%= KTFrameworkCus.Globals.ApplicationPath %>dms/Ajax/dms-Ajax.asmx/deleteProductImage";
                $.ajax({
                    url: strURL,
                    type: 'POST',
                    data: "imageid=" + ImageSelected,
                    datatype: "Text",
                    success: function (msg) {
                        var mess = $(msg).find('string').text();
                        if (mess.indexOf(',') > -1) {
                            var list = mess.split(',');
                            for (var i = 0; i < list.length - 1; i++) {
                                $("#dmsImageID-" + list[i]).fadeOut(400, function () {
                                    $(this).remove();
                                });

                                //.fadeOut(400).delay(400).remove();
                                //alert(list[i]);
                            }
                        }
                        else {
                            alert('Có lỗi xảy ra!')
                        }
                    }

                });
            }


        });


        $("#<%=FileUpload1.ClientID %>").uploadify({
            'uploader': '<%= KTFrameworkCus.Globals.ApplicationPath %>dms/Uploadify/uploadify22.swf',
            'script': '<%= KTFrameworkCus.Globals.ApplicationPath %>dms/Ajax/ProductImagesAjax.ashx',
            'cancelImg': '<%= KTFrameworkCus.Globals.ApplicationPath %>dms/Uploadify/uploadify-cancel.png',
            'fileExt': '*.jpg;*.jpeg;*.png',
            'multi': true,
            'auto': true,
            'scriptData': { 'pid': '<%=productid %>' },
            'onAllComplete': function (event, data) {
                btnpob_Click();
            }
        });
    });
</script>
